import React from "react";
// import { Map } from "immutable";
// import { List } from "immutable";
import { fromJS } from "immutable";

// 在改变redux数据的同时，尽可能地不要去增加内存的消耗
// immutable就是解决这个问题

// 性能优化

const App = () => {
  // immutable叫做不可变数据，一旦immutable数据创建了以后就不能再被修改了
  // 对于这个数据任何修改，而是会返回一个新数据

  // 第二个特点叫做结构共享，不变的内容可以和之前的内容共享内存

  // 使用immutable来创建对象
  // const obj = Map({
  //   a: 3,
  //   b: 4,
  // });
  // console.log(obj);
  // get方法获取immutable对象的属性
  // console.log(obj.get("a"));
  // set方法去生成了一个新的immutable对象
  // const obj2 = obj.set("a", 30);
  // console.log(obj2);
  // toJS用来帮助调式的时候查看对象，但是项目不要用
  // console.log(obj.toJS());
  // update方法可以根据原来的值做修改
  // const obj2 = obj.update("a", (v) => v * 2);
  // console.log(obj2);

  // 使用immutable来创建数组
  // const arr = List([1, 2, 3, 4, 5]);
  // console.log(arr);

  // fromJS相当于是递归的Map
  const obj = fromJS({
    a: 3,
    b: 4,
    c: {
      x: 10,
      y: 20,
    },
  });
  console.log(obj);

  // getIn方法用于获取嵌套较深的immutable对象的属性
  console.log(obj.getIn(["c", "x"]));
  // setIn方法用于修改嵌套较深的immutable对象的属性
  const obj2 = obj.setIn(["c", "x"], 100);
  console.log(obj2);
  // updateIn用于修改嵌套较深的immutable对象的属性并且依赖于修改前的值
  const obj3 = obj.updateIn(["c", "x"], (v) => v + 1);
  console.log(obj3.toJS());

  return (
    <>
      <h2>immutable</h2>
    </>
  );
};

export default App;
